<template>
<div id="div1">
<div :style="'background:'+(msg.isActive?'red':'yellow')" class = "box">动态绑定style-三目写法</div>  <!-- isActive为true时，背景色为red，否则为yellow -->
<button @click="hand">切换</button>
<h1>{{name}}</h1>
</div>

<div class="mb-2 flex items-center text-sm">
    <el-radio-group v-model="radio1" class="ml-4">
      <el-radio label="1" size="large">Option 1</el-radio>
      <el-radio label="2" size="large">Option 2</el-radio>
    </el-radio-group>
  </div>


</template>

<script>
import { reactive } from '@vue/reactivity'
import {ref} from 'vue'
    export default{
        setup(){
            const name = ref('马云')
           // var isActive = true
            let msg =reactive({
                isActive: true
            })
            function hand() {
               //isActive = !isActive
               console.log(msg)
               msg.isActive=!msg.isActive
               name.value = '马化腾'
            }
            return {
                hand,msg,
                name,
            }
        },          
}
</script>
<style>
    .box{
        line-height: 100px;/*让黄色div中的文字内容垂直居中*/
        text-align: center;/*让文字水平居中*/   
    }
</style>